<template>
  <div class="MaterialsReplaceDialog-box">
    <t-drawer
      v-model:visible="store.moveAuxiliaryShow"
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-esc-keydown="onEscKeydown"
      :on-close-btn-click="onCloseBtnClick"
      :on-overlay-click="onOverlayClick"
      :on-close="close"
      :on-confirm="onConfirmAnother"
    >
      <div class="sort-box">
        <div class="heard-box">
          <span>移动至</span>
          <i class="doorIcon">&#xe63d;</i>
        </div>
        <SortTree @emitRadio="emitRadio" :moduleLists="items" v-if="store.moveAuxiliaryShow" />
      </div>
      <template #footer>
        <div class="footer-box">
          <t-button theme="default" variant="outline" @click="close">取消</t-button>
          <t-button @click="onConfirmAnother" :loading="loading">确定</t-button>
        </div>
      </template>
    </t-drawer>
  </div>
</template>  
<script setup lang="ts">
import { disableSort, moduleDelete, moduleSave, moduleList,moveModule } from '@/api/desgin/desgin';
import { ref, watch, onMounted } from 'vue';
import { useProjectStore } from '@/store';
import SortTree from './three.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { getMOdeListArr, getMOdeListcorrelation, ExportInfoType } from '@/utils/getRemComputed';

const threeKeys = {
  value: 'id',
  label: 'text',
  children: 'children',
  key: 'id',
};
const loading = ref(false);
const activeId = ref(-1);
const treeRef = ref();
const store = useProjectStore();
const visible = ref(false);
const current = ref(1);
const pageSize = ref(10);
const items = ref([]);
const onConfirmAnother = async (context) => {
  // console.log('点击了确认按钮', context);
  // visible.value = false;
  //   store.moveAuxiliaryShow = false;
  if (activeId.value === -1) {
    MessagePlugin.error('请选择移动大纲');
  }
  if (activeId.value === -1 || loading.value) {
    return;
  }
  let idInfo: ExportInfoType = getMOdeListcorrelation(
    store.templateMOdeList,
    store.contextmenuchildId,
    store.selectAuxiliaryIndex,
  ); //获取所有关联信息
  loading.value = true;
  let res = await moveModule(localStorage.getItem('projectId'), idInfo.AuxiliaryId, activeId.value, 1);
  //   console.log(res.data);
  if (res.succeeded) { 
    MessagePlugin.success('移动成功');
    store.getFreeInfoData();
    setTimeout(() => {
      loading.value = false;
      store.moveAuxiliaryShow = false;
    }, 300);
  } else {
    loading.value = false;
  }
};

const close = (context) => {
  //   console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
  //   store.setOutlineSortShow(false);
  store.moveAuxiliaryShow = false;
};
const onCancel = (context) => {
  //   console.log('点击了取消按钮', context);
  // store.setMaterialsReplaceShow(false)
};
const onEscKeydown = (context) => {
  //   console.log('按下了ESC', context);
  // store.setMaterialsReplaceShow(false)
};
const onCloseBtnClick = (context) => {
  //   console.log('点击了关闭按钮', context);
  // store.setMaterialsReplaceShow(false)
};
const emitRadio = (id: number) => {
  activeId.value = id;
  console.log(activeId.value);
};
const onOverlayClick = (context) => {
  //   console.log('点击了蒙层', context);
};

const handleDragStart = ({ node, e }) => {
  // console.log('handleDragStart', node.value, e);
};
const handleDragEnd = ({ node, e }) => {
  // let arr = treeRef.value.getTreeData();
  // arr.forEach((element) => {
  //   if (element.children) {
  //     element.children.forEach((el) => {
  //       if (el.children) {
  //         el.children.forEach((arr) => {
  //           if (!arr.children) {
  //             arr.children = [];
  //           }
  //         });
  //       } else {
  //         el.children = [];
  //       }
  //     });
  //   } else {
  //     element.children = [];
  //   }
  // });
  // store.setTemplateMOdeList(arr);
};

const handleDragOver = () => {};
const handleDragLeave = ({ node, e }) => {
  // console.log('handleDragLeave', node.value, e);
};
const handleDrop = ({ node, dropPosition, e }) => {
  // console.log('handleDrop', node.value, dropPosition, e);
};

onMounted(() => {
  items.value = store.templateMOdeList;
});
watch(
  () => store.templateMOdeList,
  () => {
    items.value = store.templateMOdeList;
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.sort-box {
  width: 100%;
  height: 100%;
  overflow: auto;
}
:deep(.t-drawer__header) {
  display: none;
}
:deep(.t-drawer__footer) {
  padding: 20px 24px;
  border-top: 0px;
}
:deep(.t-drawer__body) {
  padding: 0 0px;
}
:deep(.t-drawer__content-wrapper) {
  width: 372px !important;
}
.doorIcon {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.59);
}
.heard-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  span {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
    line-height: 28px;
  }
  .doorIcon {
    cursor: pointer;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
  }
}

.tree-box {
}
.footer-box {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  :deep(.t-button) {
    height: 40px;
    width: 68px;
  }
}
:deep(.t-tree__item) {
  height: 44px;
}
:deep(.t-tree__icon) {
  padding-left: 24px;
  width: 40px;
}
:deep(.t-tree__item--tip-highlight) {
  background: #ffece6 !important;
}
:deep(.t-tree__item--tip-bottom) {
  background: #ffece6 !important;
  border-color: #ffece6 !important;
}

:deep(.t-tree__item--tip-bottom::after) {
  background: #e62b17 !important;
}
:deep(.t-tree__item--tip-top) {
  background: #ffece6 !important;
  border-color: #ffece6 !important;
}

:deep(.t-tree__item--tip-top::after) {
  background: #e62b17 !important;
}
</style>